<template>
	<view class="content">
		<view class="search">
			<view class="left">
				<uni-data-select v-model="value" :localdata="range"></uni-data-select>
			</view>
			<view class="right">
				<uni-search-bar :focus="true" v-model="searchValue" @cancel="cancel"></uni-search-bar>
			</view>
		</view>
		<mk-list :goods="goodsList" @clickItem="gotoDetail"></mk-list>
	</view>
</template>

<script>
	import uniDataSelect from "@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue"
	import mkList from "../../components/mk-goods-list/mk-goods-list.vue"
	import {
		typeList,
		goodsQuery
	} from "@/service/homeService.js"
	export default {
		components: {
			uniDataSelect,
			mkList
		},
		async created() {
			let res = await typeList();

			this.range = [{
				value: "0",
				text: "全部"
			}].concat(res.data.map(item => ({
				value: String(item.id),
				text: item.type
			})));
		},
		async onLoad({
			id
		}) {
			this.value = id; //需要查询的类别
			this.search();

		},
		data() {
			return {
				searchValue: "", //查询的关键字
				value: "0",
				range: [],
				goodsList: [], //商品列表
			};
		},
		methods: {
			cancel() {
				this.searchValue = "";
			},
			gotoDetail(info) {
				uni.navigateTo({
					url:"/pages/detail/detail?id="+info.id
				})
			},
			async search() {
				let data = {};
				if (this.value !== "0") {
					data.typeid = this.value;
				}
				if(this.searchValue){
						data.name_like=this.searchValue;
				}

				let res = await goodsQuery(data);
				this.goodsList = res.data;

			}
		},
		watch: {
			value() {
				this.search();
			},
			searchValue(){
				this.search();
			}
		}
	};
</script>

<style>
	.search {
		display: flex;
		height: 100rpx;
		align-items: center;
	}

	.search .left {
		flex: 1
	}

	.search .right {
		flex: 3
	}
</style>
